<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">赛事详情</block>
		</cu-custom>
		<image src="../../../static/BasicsBg.png" class="match-img"></image>
		<view class="match-info">
			<view class="info-title">{{matchinfo.name}}</view>
			<view class="info-padding">
				<view class="cu-tag bg-red light sm round">{{matchinfo.type==1?"个人赛":"团队赛"}}</view>
				<view class="cu-tag light sm round" :class="(matchinfo.state==1|| matchinfo.state==3)?'bg-blue':'bg-gray'">{{matchinfo.state==1?"报名中":matchinfo.state==2?"报名结束":matchinfo.state==3?"比赛中":matchinfo.state==4?"已结束":matchinfo.state==0?"改期":"其他"}}</view>
				<text class="text-price text-red info-fee">
				{{matchinfo.fee}}
				</text>
			</view>
			<view  v-show="matchinfo.state==0 || matchinfo.state==-1" class="info-update info-padding">
				<label class="bg-red upreason" >{{matchinfo.state==0?'改':'停'}}</label>{{matchinfo.updatereason}}
			</view>
			<view class="fg"></view>
			
			<view>
				<view class="cu-form-group">
					<view class="title">赛事地点</view>
					<view @click="location">{{matchinfo.city}}{{matchinfo.address}}<label class="cuIcon-location"></label></view>
				</view>
				<view class="cu-form-group">
					<view class="title">项目</view>
					{{matchinfo.subject}}
				</view>
				<view v-show="matchinfo.type==2" class="cu-form-group">
					<view class="title">赛制</view>
					循环+淘汰
				</view>
				<view class="cu-form-group">
					<view class="title">比赛开始时间</view>
					{{matchinfo.startime}} 持续{{matchinfo.continueday}}天 
				</view>
				<view class="cu-form-group">
					<view class="title">报名截止时间</view>
					{{matchinfo.joinendtime}}
				</view>
				<view class="cu-form-group">
					<view class="title">联系人</view>
					<view @click="call">{{matchinfo.connect_name}}<label class="cuIcon-dianhua"></label></view>
					
				</view>
			</view>
			<view class="fg"></view>
			<view class="info-manage">
				<navigator class="info-m-col" :url="'/pages/tennis/match/needknow?mid='+matchinfo.id">
					<image class="info-manage-img" src="../../../static/tennis/saishi.png"></image>
					<view><text>赛事须知</text></view>
				</navigator>
				<navigator v-if="matchinfo.type==1" class="info-m-col" :url="'/pages/tennis/match/per_ybm?mid='+matchinfo.id">
					<image class="info-manage-img" src="../../../static/tennis/yibaoming.png"></image>
					<view><text>已报名</text></view>
				</navigator>
				<navigator  v-if="matchinfo.type==2" class="info-m-col" :url="'/pages/tennis/match/team_ybm?mid='+matchinfo.id">
					<image class="info-manage-img" src="../../../static/tennis/yibaoming.png"></image>
					<view><text>已报名</text></view>
				</navigator>
				<navigator class="info-m-col" :url="'/pages/tennis/match/spo_info?mid='+matchinfo.id">
					<image class="info-manage-img" src="../../../static/tennis/wode-guanyuwomen.png"></image>
					<view><text>组织方信息</text></view>
				</navigator>
				<navigator v-if="matchinfo.iscreate" class="info-m-col" :url="'/pages/tennis/match/info_manage?mid='+matchinfo.id">
					<image class="info-manage-img" src="../../../static/tennis/guanli.png"></image>
					<view><text>赛事管理</text></view>
				</navigator>
			</view>
			<view class="fg"></view>
			<view class="info-bm">
				<!---->
				<button @click="bm" v-if="!matchinfo.iscreate && matchinfo.state==1" :data-csid="matchinfo.id" class="bg-blue">立即报名</button>
				<button @click="matchcenter" class="bg-blue">比赛中心</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	import amap from '../../../common/amap-wx.js';
	export default {
		onLoad(option) {
			this.mid=option.mid;
			this.userid=uni.getStorageSync("uid");
			this.openid=uni.getStorageSync('openid');
			if(this.userid.length<=0){
				this.userid=0;
			}
			this.amapPlugin = new amap.AMapWX({
				key: this.sdkkey  
			}); 
		},
		onShow() {
			uni.showLoading({
				title:'加载中..'
			});
			uni.request({
				url:"https://www.52tennis.cn/Match/GetMatchInfo",
				data: {
					matchid:this.mid,
					userid:this.userid
				},
				success:(data)=> {
					if(data.data.result==1){
						this.matchinfo=data.data.returnjson;
					}else{
						uni.showToast({
							title: '数据错误',
							icon: 'fail',
							mask: true,
							duration: 3000
						})
					}
				},
				complete:()=>{
					uni.hideLoading();
				}
			})
		},
		data() {
			return {
				userid:0,
				openid:"",
				mid:0,
				matchinfo:{},
				amapPlugin:null
			}
		},
		methods: {
			call(e){
				uni.makePhoneCall({
				    phoneNumber: this.matchinfo.connect_tel //仅为示例
				});
			},
			bm(e){
				
				if(this.userid.length<=0 || this.openid.length<=0){
					uni.showModal({
					    title: '登陆提示',
					    content: '您暂未登陆,是否马上登陆',
					    success: function (res) {
					        if (res.confirm) {
					           uni.navigateTo({
									url:"/pages/tennis/user/index"
					           })
					        } else if (res.cancel) {
					           
					        }
					    }
					});
				}else{
					let csid= e.currentTarget.dataset.csid;
					if(this.matchinfo.type==1){
						uni.navigateTo({
							url:"/pages/tennis/match/per_joinMatch?mid="+this.matchinfo.id
						})
					}else{
						uni.navigateTo({
							url:"/pages/tennis/match/team_joinMatch?mid="+this.matchinfo.id
						})
					}
					
				}
				
				
			},
			matchcenter(e){
				uni.navigateTo({
					url:"/pages/tennis/match/perMatchCenter"
				})
			},
				
			location(e){
				
				const longi=Number(this.matchinfo.longitude);
				const lat = Number(this.matchinfo.latitude);
				console.log(lat);
				console.log(longi);
				
				uni.openLocation({
					latitude: lat,
					longitude: longi,
					name:this.matchinfo.address,
					success: function () {
						console.log('success');
					},
					fail: (res) => {
						console.log(res);
					}
				});
					
			}
		}
	}
</script>

<style>
.match-img{
	width:100%;
}
.match-info{
	padding:20rpx;
	background-color: white;
}
.info-padding{
	padding-top:15rpx;
}
.info-fee{
	font-size: 40rpx;
	margin-left: 40rpx;

}
.info-title{font-size: 50rpx;}
.fg{
	border-bottom: 10rpx solid #EBEEF5;
	margin-top:10rpx;
}
.info-manage{
	display: flex;
	text-align: center;
	height: 100rpx;
	margin: 30rpx 0rpx;
}
.info-m-col{
	width:25%;
	height: 100rpx;
}
.info-manage-img{
	width:30%;
	height: 60%;
}
.info-bm{
	display: flex;
	margin-top:50rpx;
}
.info-bm button{
	height: 60rpx;
	line-height: 60rpx;
	width: 40%;
	font-size: 14px;
}
.upreason{
	border-radius: 15rpx;
}
</style>
